<template>
    <div id="app">
        <a-drawer destroyOnClose v-model:visible="visable" :title="title" :mask-closable="false" width="50%"
            :styles="styles" @cancel="close" :footer="false">
            <a-form ref="appFrom" :model="formData" :rules="formRule" :label-col-props="{ span: 6 }" layout="vertical">
                <a-row :gutter="8">
                    <a-col :span="16">
                        <a-form-item label="协议名称" label-position="top" field="title"
                            :rules="[{ required: true, message: '请输入协议名称' }]">
                            <a-input v-model="formData.title" placeholder="请输入协议名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="标识符(不要随意修改)" label-position="top" field="protocol"
                            :rules="[{ required: true, message: '请输入标识符' }]">
                            <a-input v-model="formData.protocol" :disabled="formData.id != ''" placeholder="请输入标识符" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="8">
                    <a-col :span="24">
                        <tinymceVue ref="editor" v-model="formData.content" :heigth="750" />
                    </a-col>
                </a-row>
            </a-form>
            <div class="demo-drawer-footer">
                <a-button style="margin-right: 8px" @click="close">取消</a-button>
                <a-button type="primary" @click="doSubmit">确认提交</a-button>
            </div>
            <!-- <a-spin size="large" fix v-if="loading"/> -->
        </a-drawer>
    </div>
</template>

<script lang="ts">
import { onBeforeMount, ref } from 'vue';
import utils from '@/utils/utils';
import request, { editorUpload } from '@/config/request';
import tinymceVue from '@/components/tinymce.vue';
export default {
    components: { tinymceVue },
    setup(props, { emit }) {
        const visable = ref(false);
        const loading = ref(false);
        const title = ref('-');
        const appFrom = ref();
        const styles = ref({
            height: 'calc(100% - 55px)',
            overflow: 'auto',
            paddingBottom: '53px',
            position: 'static'
        });
        const groups = ref([]);
        const formData = ref({
            id: '',
            title: '',
            protocol: '',
            status: 1,
            content: '',
        });
        const formRule = ref({
            title: [
                { required: true, message: '请输入标题' }
            ],
            protocol: [
                { required: true, message: '请输入标识符' }
            ],
        });
        const show = (form: any) => {
            visable.value = true;
            formData.value.id = '';
            appFrom.value.resetFields();
            if (!form) {
                title.value = "添加"
            } else {
                formData.value = JSON.parse(JSON.stringify(form));
                title.value = "修改";
            }
        };
        const close = () => {
            visable.value = false;
            formData.value.content = '';
            formData.value.id = '';
            formData.value.title = '';
            formData.value.protocol = '';
            formData.value.status = 1;
            appFrom.value.resetFields();
            emit('close');
        };
        const init = () => {
            return {
                title: ref(''),
                name: ref(''),
                type: ref(''),
                content: ref(''),
            }
        };
        const doSubmit = () => {
            appFrom.value.validate().then((valid: any) => {
                if (valid) {
                    return;
                }
                utils.loading();
                request.post('/platform/protocol/save', formData.value).then((ret: any) => {
                    // console.log(ret)
                    if (ret.code == 200) {
                        utils.success('操作成功！').then(() => {
                            appFrom.value.resetFields();
                            visable.value = false;
                            emit('success');
                        })
                    }
                }).catch(err => {
                    console.log(err)
                })
            })
        };
        return { visable, loading, title, appFrom, styles, groups, formData, formRule, editorUpload, show, close, init, doSubmit, }
    },
}
</script>

<style scoped>
.demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
}
</style>
